// 以下写法在webpack5中支持
// import { init } from 'snabbdom/init'
// import { h } from 'snabbdom/h'

import { init } from 'snabbdom/build/package/init'
import { h } from 'snabbdom/build/package/h'

const patch = init([])

// // 调试：
// // 源码中 h() 函数有多个重载版本，所以可以使用多种参数形式
// // 第一个参数：标签+选择器
// // 第二个参数：数据（包括钩子函数：https://github.com/snabbdom/snabbdom/tree/v2.1.0#overview）
// // 第三个参数：数据
// // 返回值：一个 vnode 节点
// let vnode = h('div#container.cls',{
//   hook: {
//     init (vnode) {
//       console.log(vnode.elm)
//     },
//     create (emptyNode, vnode) {
//       console.log(vnode.elm)
//     }
//   }
// }, 'Hello World')
// let app = document.querySelector('#app')
// // 第一个参数：旧的 VNode，可以是 DOM 元素
// // 第二个参数：新的 VNode
// // 返回新的 VNode
// let oldVnode = patch(app, vnode)

// vnode = h('div#container.xxx', 'Hello Snabbdom')
// patch(oldVnode, vnode)

// // 调试：
// // 注意：
// // 同时挂载多个子节点元素 => 体现虚拟dom的优势1：这些子节点创建好之后都没有挂载到真实的dom树上，最后才挂载渲染页面；（也是在patch函数实现）
// let vnode = h('div#container', [
//     h('h1', 'Hello Snabbdom'),
//     h('p', '这是一个p')
// ])
// let app = document.querySelector('#app')

// // 比较两个节点元素的差异 => 体现虚拟dom的优势2：只更新有变化的节点，其它没有变化的节点不会更新到dom树上。
// patch(app, vnode)


// 调试：diff
let vnode = h('div', [
    h('h1', 'Hello Snabbdom'),
    h('p', '这是一个p')
])
let app = document.querySelector('#app')
let oldVnode = patch(app, vnode)

let newNode = h('div', [
    h('h1', 'Hello h1'),
    h('p', 'p1'),
    h('p', 'p2')
])
patch(newNode, oldVnode)
